<h3>Google Maps
   <small>Easy usage directly from data attribute</small>
</h3>
<div class="row">
   <div class="col-md-6">
      <div class="panel panel-default">
         <div class="panel-heading">Classic Map</div>
         <div class="panel-body">
            <div gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867" class="gmap"></div>
         </div>
      </div>
   </div>
   <div class="col-md-6">
      <div class="panel panel-default">
         <div class="panel-heading">Custom zoom</div>
         <div class="panel-body">
            <div gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867" data-zoom="19" class="gmap"></div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div class="col-md-6">
      <div class="panel panel-default">
         <div class="panel-heading">Different Map Type</div>
         <div class="panel-body">
            <div gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867" data-maptype="SATELLITE" class="gmap"></div>
         </div>
      </div>
   </div>
   <div class="col-md-6">
      <div class="panel panel-default">
         <div class="panel-heading">Multiple Addresses</div>
         <div class="panel-body">
            <div gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867; 376 N TUSTIN ST, ORANGE, CA 92867" data-title="Location 1; Location 2" class="gmap"></div>
         </div>
      </div>
   </div>
</div>
<div class="row">
   <div class="col-md-12">
      <div class="panel panel-default">
         <div class="panel-heading">Styled Maps</div>
         <div class="panel-body">
            <div gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867" data-maptype="ROADMAP" data-styled="data-styled" class="gmap"></div>
            <div class="text-center">
               <h4>Open this map in a modal</h4>
               <!-- Modal Controller-->
               <div ng-controller="ModalGmapController">
                  <!-- Button trigger modal -->
                  <button ng-click="open()" class="btn btn-primary">Launch Modal</button>
                  <!-- Modal inline template-->
                  <script type="text/ng-template" id="/myModalContent.html">
                     <div class="modal-header"><button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button><h4 id="myMapModalLabel" class="modal-title">Google Map Modal</h4></div><div class="modal-body"><div ng-if="initGmap" gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867; 376 N TUSTIN ST, ORANGE, CA 92867" data-maptype="ROADMAP" data-styled="data-styled" class="gmap"></div></div><div class="modal-footer"><button ng-click="ok()" class="btn btn-primary">OK</button></div>
                  </script>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>